import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'pages/home/home_page.dart';
import 'pages/mine/mine_page.dart';
import 'pages/zone/zone_page.dart';
import 'pages/dynamic/dynamic_page.dart';
import 'utils/common_color.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new BottomNavigationWidgetState();
  }
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex = 0;
  List<Widget> _pages = new List();
  PageController _controller;

  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
    _pages
      ..add(HomePageWidget())
      ..add(ZonePageWidget())
      ..add(DynamicPageWidget())
      ..add(MinePageWidget());
    _controller = PageController(initialPage: 0);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    /*
    返回一个脚手架，里面包含两个属性，一个是底部导航栏，另一个就是主体内容
     */

    return new Scaffold(
      //主体显示的页面跟随当前导航标签的位标值在pages页面列表中选择。
      body: PageView.builder(
          physics: NeverScrollableScrollPhysics(), //viewPage禁止左右滑动
          onPageChanged: _pageChange,
          controller: _controller,
          itemCount: _pages.length,
          itemBuilder: (context, index) => _pages[index]),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        //底部导航栏的创建需要对应的功能标签作为子项，这里我就写了3个，每个子项包含一个图标和一个title。
        items: [
          BottomNavigationBarItem(
              icon: Image.asset('images/tab_home_gray.png'),
              activeIcon: Image.asset('images/tab_home.png'),
              title: new Text(
                '首页',
              )),
          BottomNavigationBarItem(
              icon: Image.asset('images/tab_zone_gray.png'),
              activeIcon: Image.asset('images/tab_zone.png'),
              title: new Text(
                '园区',
              )),
          BottomNavigationBarItem(
              icon: Image.asset('images/tab_dynamic_gray.png'),
              activeIcon: Image.asset('images/tab_dynamic.png'),
              title: new Text(
                '动态',
              )),
          BottomNavigationBarItem(
              icon: Image.asset('images/tab_mine_gray.png'),
              activeIcon: Image.asset('images/tab_mine.png'),
              title: new Text(
                '我的',
              )),
        ],
        //这是底部导航栏自带的位标属性，表示底部导航栏当前处于哪个导航标签。给他一个初始值0，也就是默认第一个标签页面。
        currentIndex: _currentIndex,
        //这是点击属性，会执行带有一个int值的回调函数，这个int值是系统自动返回的你点击的那个标签的位标
        selectedItemColor: textBlueColor,
        unselectedItemColor: textGrayColor,
        onTap: (int i) {
          //进行状态更新，将系统返回的你点击的标签位标赋予当前位标属性，告诉系统当前要显示的导航标签被用户改变了。
          _controller.jumpToPage(i);
        },
      ),
    );
  }

  void _pageChange(int index) {
    if (index != _currentIndex) {
      setState(() {
        _currentIndex = index;
      });
    }
  }
}

void main() {
  // 强制竖屏
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        appBarTheme: AppBarTheme(
            color: Colors.white,
            iconTheme: IconThemeData(color:Color(0xFF999999) ) ,
            textTheme: TextTheme(
                title: TextStyle(color: textBlackColor, fontSize: 16,fontWeight: FontWeight.bold))),
        primarySwatch: Colors.blue,
      ),
      home: new BottomNavigationWidget(),
    );
  }
}
